<template>
  <view>
    <u-navbar bgColor="transparent" leftIconColor="#fff" auto-back>
      <template #center>
        <u-tabs
          :list="tabsList"
          line-color="#fff"
          :scrollable="false"
          :activeStyle="{
            color: '#fff',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }"
          :inactiveStyle="{
            color: '#fff',
            transform: 'scale(1)',
          }"
          itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"
        >
        </u-tabs>
      </template>
      <view> </view>
    </u-navbar>
    <swiper vertical="true" :current="current" @change="changeSwiper">
      <swiper-item v-for="(item, index) in list" :key="index">
        <VideoItem
          :item="item"
          :videoIndex="index"
          :current="current"
          @comment="comment"
        ></VideoItem>
      </swiper-item>
    </swiper>
    <u-popup
      :show="commentShow"
      @close="commentShow = false"
      round="24rpx"
      closeable
    >
      <view class="pl-24">
        <view class="my-10 px-4 py-8 w-200 flex items-center">
          <u-image
            width="60rpx"
            height="60rpx"
            src="https://cdn.uviewui.com/uview/album/1.jpg"
          ></u-image>
          <view class="text-12 ellipsis-1 flex-1"
            >【好物推荐】高级商品啊啊啊商品啊啊啊商品啊啊啊</view
          >
          <view>
            <u-icon
              name="arrow-right"
              size="28rpx"
              label="2件商品"
              label-pos="left"
              label-size="12"
              color="#333"
            ></u-icon>
          </view>
        </view>
      </view>
      <scroll-view style="height: 60vh" scroll-y>
        <view class="p-16">
          <view class="pb-16"
            >商品介绍商品介绍商品介商品介绍商品介绍商品介商品介绍商品介绍商品介商品介绍商品介绍商品介商品介绍商品介绍商品介绍商品介绍商品介绍</view
          >
          <view> 评论(0) </view>
          <u-empty mode="message" text="暂无评论" margin-top="200rpx">
          </u-empty>
        </view>
      </scroll-view>
      <view class="tabbar" @touchmove.stop.prevent="stopRoll">
        <view
          class="tabbar-content u-border-top"
          :style="{
            bottom:
              keyboardHeight > 0 ? 'calc(' + keyboardHeight + 'px - 1px)' : 0,
          }"
        >
          <view class="tabbar-input flex col-center px-12 py-8">
            <view class="input flex-1 rela">
              <textarea
                class="input-inner"
                :auto-height="true"
                v-model="message"
                placeholder="评论"
                maxlength="-1"
                :cursor-spacing="17"
                :adjust-position="false"
                :focus="inputFocus"
                @blur="inputBlur"
                @input="onInput"
              />
            </view>
            <view class="confirm-btn ml-14" v-if="isChangeInput">
              <u-button
                color="#6cc599"
                text="发送"
                @touchend.stop="submitComment"
              ></u-button>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import VideoItem from "@/subpages/lifeVideo/video-item/index.vue";
export default {
  components: {
    VideoItem,
  },
  data() {
    return {
      tabsList: [{ name: "推荐" }, { name: "关注" }],
      isInput: false,
      isChangeInput: false,
      message: "",
      inputFocus: true,
      keyboardHeight: 0,
      current: 0,

      video: null,
      commentShow: false,
      list: [
        {
          url: "https://cdn.uviewui.com/uview/resources/video.mp4",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
          poster: "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        },
        {
          url: "https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/top.mp4",
          title: "身无彩凤双飞翼，心有灵犀一点通",
          poster: "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        },
        {
          url: "https://cdn.uviewui.com/uview/resources/video.mp4",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
          poster: "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        },
      ],
    };
  },
  methods: {
    inputBlur() {
      this.isInput = false;
    },
    onInput(e) {
      if (e?.detail?.cursor > 0) {
        this.isChangeInput = true;
      } else {
        this.isChangeInput = false;
      }
    },
    submitComment() {
      console.log("发送评论");
    },
    toInput() {
      this.isInput = !this.isInput;
    },
    stopRoll() {},
    changeSwiper(e) {
      this.current = e.detail.current;
    },
    videoUpdate(event) {
      //进度条 绑定视频播放进度
      let duration = this.videoTime;
      let sliderValue = (event.detail.currentTime / duration) * 100;
      let second = (sliderValue / 100) * duration;
      this.sliderValue = second;
      //视频总时长
      this.druationTime = this.formatSeconds(duration);
      //视频当前播放时长
      this.currtime = this.formatSeconds(second);
    },
    comment() {
      this.commentShow = true;
    },
  },
  mounted() {},
  onReady() {
    let sysInfo = uni.getSystemInfoSync();
    let heightDiff = sysInfo.screenHeight - sysInfo.windowHeight;
    const barHeight = sysInfo.statusBarHeight;
    uni.onKeyboardHeightChange((res) => {
      const platform = uni.getStorageSync("platform");

      console.log("键盘高度", heightDiff);
      if (platform === "ios") {
        this.keyboardHeight = res.height - heightDiff + barHeight;

        console.log("软键盘高度", res.height);
      } else {
        this.keyboardHeight = res.height;
      }

      if (res.height === 0) {
        this.focus = false;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
swiper {
  height: 100vh;
  width: 100vw;
  video {
    width: 100vw;
    height: 100vh;
  }
}
.tabbar {
  height: calc(74rpx + env(safe-area-inset-bottom));

  .tabbar-content {
    height: fit-content;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 10072;
    transition: all 0.3s;

    .input {
      background: #f6f7f9;
      border-radius: 8px;
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      line-height: 1.4;
    }

    .input-inner {
      font-size: 28rpx;
      max-height: 250rpx;
      width: auto;
    }

    .confirm-btn {
      width: 120rpx;
      line-height: 74rpx;
    }
  }
}
</style>
